<template>
	<div class="template-management">
		<zk-searcher v-model="query" :options="searchColumns" />
		<w-block class="body" title="督办信息列表" style="margin-top: 10px">
			<zk-table
				:columns="tableColumns"
				:service="service"
				:query="query"
				use-selection
				:actions="actions"
				:requestInterceptor="requestInterceptor"
				@onSelectionChange="onSelection"
				@refresh-data="getRefreshData"
			>
				<template #control="scope">
					<template v-if="scope.row.db_state==1">
						<el-button size="small" type="text" @click="handleDialogCommand(scope.row.id)">下发</el-button>
					</template>
					<template v-if="scope.row.db_state==3">
						<el-button size="small" type="text" @click="handleDialogLookResult(scope)">查看结果</el-button>
						<el-button size="small" type="text" @click="handleDialogRemind(scope)">反馈</el-button>
					</template>
					<template v-if="scope.row.db_state==4">
						<el-button size="small" type="text" @click="handleDialogLookResult(scope)">查看全部反馈结果</el-button>
					</template>
				</template>
			</zk-table>
		</w-block>
		<w-dialog :visible.sync="visibleCommand" width="600px" title="下发">
			<div class="pick-tree-body">
				<el-tree
					class="pick-tree"
					ref="tree"
					:data="treeData"
					node-key="id"
					:default-expanded-keys="defaultExpandedKeys"
					:default-checked-keys="[]"
					:props="defaultProps"
					accordion
					@node-click="handleNodeClick"
				/>
				<div class="picked-user">
					<div>{{ checkedUser.label ? '已经选择' : '暂未指定问责人' }}</div>
					<el-tag
						v-if="checkedUser.label"
						:key="checkedUser.label"
						style="margin-left: 20px"
						type="success"
						size="medium"
						effect="dark">
						<i class="el-icon-user" />
						{{ checkedUser.label }}
					</el-tag>
				</div>
			</div>
			<template #footer>
				<div class="flex-end">
					<el-button type="default" @click="visibleCommand=false">取 消</el-button>
					<el-button type="primary" @click="submitCommand">下 发</el-button>
				</div>
			</template>
		</w-dialog>
		<w-dialog :visible.sync="visibleLookResult" width="800px" title="查看结果">
			<table class="table-look-details">
				<tr v-if="this.model.fk_time">
					<td class="bg-title">反馈时间</td>
					<td>{{this.model.fk_time}}</td>
				</tr>
				<tr>
					<td class="bg-title">任务超时原因</td>
					<td>{{this.model.reason_type==='01'?'内部原因':'外部原因'}}</td>
				</tr>
				<tr v-if="this.model.fk_duty_person">
					<td class="bg-title">责任人</td>
					<td>{{this.model.fk_duty_person}}</td>
				</tr>

				<tr>
					<td class="bg-title">超时具体原因</td>
					<td>{{this.model.overtime_content}}</td>
				</tr>
				<tr>
					<td class="bg-title">整改措施</td>
					<td>{{this.model.handle_content}}</td>
				</tr>
				<tr>
					<td class="bg-title">反馈人</td>
					<td>{{this.model.done_person_name}}</td>
				</tr>
			</table>
			<template #footer>
				<div class="flex-end">
					<el-button type="primary" @click="visibleLookResult=false">关 闭</el-button>
				</div>
			</template>
		</w-dialog>
		<w-dialog :visible.sync="visible" height="auto" title="超时预警反馈">
			<el-form ref="modelForm" :model="model" label-width="160px">
				<el-row>
					<el-col v-for="item of modalColumns" :key="item.key" :span="item.span || 22">
						<el-form-item
							:label="item.label"
							:prop="item.key"
							:rules="item.required && [{ required: true, message: `请输入${item.label}`, trigger: ['blur'] }]"
						>
							<zk-item-pool
								v-model="model[item.key]"
								:option="{...item, disabled:item.disabled }"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<div class="flex-end">
					<el-button type="default" @click="visible=false">取 消</el-button>
					<el-button type="primary" @click="submit">保 存</el-button>
				</div>
			</template>
		</w-dialog>
	</div>
</template>
<script>
import { taskSupervisionCommand as service } from '@/services'
import SearchTableCRUDMixin                  from '@/mixins/search-table-crud-mixin'

import { TYPE_ENUM } from '@/common/zk-constants'


export default {
	mixins : [SearchTableCRUDMixin],
	data() {
		return {
			columns            : [
				{ 'label': '项目名称', 'key': 'project_name', table: true, search: true, required: true },
				{ 'label': '工作名称', 'key': 'work_name', table: true, search: true, required: true },
				{ 'label': '任务名称', 'key': 'task_name', table: true, search: true, required: true },
				{ 'label': '责任部门', 'key': 'duty_dept', type: TYPE_ENUM.SELECT, storeKey: 'orgList', table: true, search: true, required: true },
				{ 'label': '应完成日期', 'key': 'should_done_time', table: true, required: true },
				{ 'label': '上级督办内容', 'key': 'ld_content', table: true, required: true },
				{ 'label': '上级督办时间', 'key': 'db_time', type: TYPE_ENUM.DATE_RANGE, rangeKeys: ['db_time_start', 'db_time_end'], table: true, search: true, required: true, span: 12, },
				{ 'label': '状态', 'key': 'db_state', type: TYPE_ENUM.SELECT, storeKey: 'superviseState', table: true, search: true, required: true },
			],
			modalColumns       : [
				{ 'label': '任务超时原因', 'key': 'reason_type', type: TYPE_ENUM.RADIO, storeKey: 'reasonType', required: true },
				{ 'label': '超时具体原因', 'key': 'overtime_content', type: TYPE_ENUM.TEXT_AREA, required: true },
				{ 'label': '整改措施', 'key': 'handle_content', type: TYPE_ENUM.TEXT_AREA, required: true },
			],
			service,
			actions            : ['slot', 180],
			//
			visibleCommand     : false,
			rowId              : undefined,
			defaultProps       : {
				children: 'children',
				label   : 'label'
			},
			defaultExpandedKeys: [],
			treeData           : [],
			checkedUser        : {
				label: undefined
			},
			//
			visibleLookResult  : false,
			//
			visible            : false,
		}
	},
	watch  : {
		visibleCommand(nVal) {
			if (!nVal) {
				this.checkedUser = {
					label: undefined
				}
			}
		},
		'model.reason_type': {
			deep: true,
			// immediate: true,
			handler(e) {
				// console.log('model.reason_type', e, this.modalColumns);
				const personInChargeIndex = this.modalColumns.findIndex(item => item.key == 'fk_duty_person')
				const personInChargeItem = { 'label': '负责人', 'key': 'fk_duty_person', required: true, }
				//选中内部原因的时候
				if (e === '01') {
					if (personInChargeIndex > -1) return//如果this.modalColumns里面有负责人,返回
					this.modalColumns.splice(1, 0, personInChargeItem)//插入负责人
				}
				//非选中内部原因的情况下
				else {
					if (personInChargeIndex > -1) this.modalColumns.splice(personInChargeIndex, 1)//如果this.modalColumns里面有负责人,删除负责人
				}
			}
		},
	},
	methods: {
		async getRefreshData({ tableData }) {
			if (!tableData || !tableData.length) return
			if (!this.treeData.length) this.treeData = await service.querySpPersonTree()
		},
		requestInterceptor(query) {
			return { ...query, 'pageType': 'sjdb'/*上级督办*/ }
		},
		handleNodeClick(data) {
			console.log('handleNodeClick', data)
			if (data.levelState === '1') {
				this.checkedUser = data
			}
		},
		async submitCommand() {
			if (!this.checkedUser.sp_person_id) {
				this.$message.warning(`请选择问责人`)
				return
			}
			const result = await service.doXf({
				"id"         : this.rowId,
				"done_person": this.checkedUser.sp_person_id
			})

			if (result) {
				this.$message.success(`下发成功`)
				this.visibleCommand = false
				this.reload()
			}
			else {
				this.$message.warning(`下发失败`)
			}
		},
		handleDialogCommand(id) {
			this.visibleCommand = true
			this.rowId = id
		},
		handleDialogLookResult({ row }) {
			this.model = { ...row }
			this.visibleLookResult = true
		},
		handleDialogRemind({ row }) {
			this.model = { ...row }
			this.visible = true
		},
		async submit() {
			this.$refs['modelForm'].validate(async (valid) => {
				if (valid) {
					await this.service.doFk_sj({
						...this.model,

					}) && this.reload()
					this.model = {}
					this.visible = false
				}
			})
		},
	},
	async mounted() {
	}
}
</script>
<style scoped lang="scss">
	.command-dialog {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.table-look-details {
		padding: 20px 0;
		width: 100%;
		border-collapse: collapse;

		td {
			border: 1px solid rgba(77, 116, 251, 0.3);
			padding: 10px 20px;
		}

		.bg-title {
			width: 200px;
			background-color: #f5f5f5;
		}
	}

	.pick-tree-body {
		display: flex;
		align-self: flex-start;
		width: 100%;

		.pick-tree {
			width: 45%;
			height: 500px;
			padding: 10px;
			overflow-y: auto;
		}

		.picked-user {
			width: 55%;
			padding-left: 20px;

			> div {
				color: #c2c2c2;
				margin: 20px;
			}

			.el-tag {
				font-size: 16px;
				padding: 2px 12px;
				height: 30px;
			}
		}
	}
</style>
